<template>
  <div>
    <van-nav-bar title="主体信息" fixed left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <van-form ref="subForm" class="mg-25 mt-20">
        <form-item item-name="主体类型">
          <van-field name="radio" label="主体类型">
            <template #input>
              <van-radio-group v-model="info.MerchantType" direction="horizontal">
                <van-radio :name="0">
                  个体户
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
                <van-radio :name="1">
                  企业
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </form-item>

        <form-item item-name="营业执照信息">
          <van-field
            v-model="info.MerchantName"
            name="商户名称"
            label="商户名称"
            placeholder="商户名称"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field
            v-model="info.LicenseNo"
            name="注册号"
            label="注册号"
            placeholder="注册号"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field
            v-model="info.LicenseImage"
            name="uploader"
            label="营业执照照片"
            :rules="[{ required: true, message: '请上传营业执照照片' }]"
          >
            <template #input>
              <van-uploader
                v-model="licenseImageArr"
                :after-read="licenseImageAfterRead"
                max-count="1"
              />
            </template>
          </van-field>
          <p class="upload-text pb-20">需文字清晰、露出国徽</p>
        </form-item>
        <form-item item-name="经营者证件信息" class="ID-box-no-line">
          <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="idnetTypeText"
            label="证件类型"
            placeholder="请选择"
            :rules="[{ required: true, message: ' ' }]"
            @click="idnetTypePicker = true"
          />
          <van-popup v-model="idnetTypePicker" position="bottom">
            <van-picker
              v-model="info.IdnetType"
              item-height="45"
              visible-item-count="4"
              show-toolbar
              title="证件类型"
              :columns="idnetTypes"
              @confirm="idnetTypeOnConfirm"
              @cancel="idnetTypePicker = false"
            />
          </van-popup>
          <van-field
            v-model="info.Manager"
            name="真实姓名"
            label="真实姓名"
            placeholder="真实姓名"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field
            v-model="info.IdnetNo"
            name="证件号码"
            label="证件号码"
            placeholder="证件号码"
            :rules="[{ required: true, message: ' ' }]"
          />
          <van-field name="radio" label="长期证件">
            <template #input>
              <van-radio-group v-model="PermanentId" direction="horizontal">
                <van-radio :name="1">
                  是
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
                <van-radio :name="0">
                  否
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="info.IdnetStart"
            label="证件开始时间"
            placeholder="证件开始时间"
            :rules="[{ required: true, message: ' ' }]"
            @click="idnetStartPicker = true"
          />
          <van-popup v-model="idnetStartPicker" position="bottom">
            <van-datetime-picker
              v-model="IdnetStart"
              item-height="45"
              visible-item-count="4"
              type="date"
              title="证件开始时间"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="idnetStartOnConfirm"
              @cancel="idnetStartPicker = false"
            />
          </van-popup>

          <van-field
            v-if="PermanentId !== 1"
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="info.IdnetEnd"
            label="证件到期时间"
            placeholder="证件到期时间"
            :rules="[{ required: true, message: ' ' }]"
            @click="idnetEndPicker = true"
          />
          <van-popup v-model="idnetEndPicker" position="bottom">
            <van-datetime-picker
              v-model="IdnetEnd"
              item-height="45"
              visible-item-count="4"
              type="date"
              title="证件到期时间"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="idnetEndOnConfirm"
              @cancel="idnetEndPicker = false"
            />
          </van-popup>
          <van-field
            v-model="info.IdnetImage"
            name="uploader"
            label="证件照片"
            :rules="[{ required: true, message: '请上传证件头像面' }]"
          >
            <template #input>
              <van-uploader v-model="idnetImageArr" :after-read="idnetImageAfterRead" max-count="1">
                <div>
                  <div class="upload-box flex flex-center br-5">
                    <van-icon name="plus" style="font-size:28px" />
                    <p>点击上传证件头像面</p>
                  </div>
                </div>
              </van-uploader>
            </template>
          </van-field>
          <van-field
            id="back1"
            v-model="info.IdnetBackImage"
            name="uploader"
            label="  "
            :rules="[{ required: true, message: '请上传证件国徽面' }]"
          >
            <template #input>
              <van-uploader
                v-model="idnetBackImageArr"
                :after-read="idnetBackAfterRead"
                max-count="1"
              >
                <div>
                  <div class="upload-box flex flex-center br-5">
                    <van-icon name="plus" style="font-size:28px" />
                    <p>点击上传证件国徽面</p>
                  </div>
                </div>
              </van-uploader>
            </template>
          </van-field>
          <!-- <van-field name="radio" label="是否为收益所有人">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">
                  是
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
                <van-radio name="2">
                  否，非经营者
                  <template #icon="props">
                    <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                  </template>
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>-->
        </form-item>

        <div class="btn-box pt-40 pb-60 flex-center">
          <van-button class="br-10 hollow-btn" type="info" @click="handleSubmit(0)">保存草稿</van-button>
          <van-button class="br-10 solid-btn" type="info" @click="handleSubmit(1)">保存并下一步</van-button>
        </div>

        <!-- <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>-->
      </van-form>
    </div>
  </div>
</template>

<script>
import formItem from 'components/formItem'
import { AddMerchantMainData, GetMerchantApplyData } from 'api/merchantPaper'
import { upLoad } from 'api/upload'
import utils from 'utils/utils'
export default {
  components: {
    formItem
  },
  data() {
    return {
      PermanentId: 0, // 长期证件
      IdnetStart: new Date(),
      IdnetEnd: new Date(),

      info: {
        AccountNo: '',
        MerchantType: '',
        MerchantName: '',
        LicenseNo: '',
        LicenseImage: '',
        Manager: '',
        IdnetType: 0,
        IdnetImage: '',
        IdnetBackImage: '',
        IdnetNo: '',
        IdnetStart: undefined,
        IdnetEnd: undefined
      },
      idnetTypeText: '',
      licenseImageArr: [],
      idnetImageArr: [],
      idnetBackImageArr: [],
      idnetTypes: [
        { id: 0, text: '身份证' },
        { id: 1, text: '护照' },
        { id: 2, text: '香港居民来往内地通行证' },
        { id: 3, text: '澳门居民来往内地通行证' },
        { id: 4, text: '台湾居民来往大陆通行证' }
      ],
      columns: ['1', '2'],
      idnetTypePicker: false,
      idnetStartPicker: false,
      idnetEndPicker: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2100, 10, 1),
      accountNo: ''
    }
  },
  watch: {
    PermanentId(newVal, oldVal) {
      if (newVal === 1) {
        this.info.IdnetEnd = undefined
      }
    }
  },
  created() {
    const now = new Date()
    const startYear = now.getFullYear() - 100
    const endYear = now.getFullYear() + 100
    this.minDate = new Date(startYear, 0, 1)
    this.maxDate = new Date(endYear, 11, 1)

    this.accountNo = this.$route.query.accountNo
    this.GetMerchantApplyData()
  },
  methods: {
    // 获取主体信息
    GetMerchantApplyData() {
      if (this.accountNo) {
        GetMerchantApplyData({
          AccountNo: this.accountNo
        }).then(res => {
          if (res) {
            this.info = res.Data.Main
            this.idnetTypeText = this.idnetTypes[this.info.IdnetType].text
            this.licenseImageArr = [
              {
                url: this.info.LicenseImage
              }
            ]
            this.idnetImageArr = [
              {
                url: this.info.IdnetImage
              }
            ]
            this.idnetBackImageArr = [
              {
                url: this.info.IdnetBackImage
              }
            ]
            this.info.IdnetStart = this.info.IdnetStart.split(' ')[0]
            this.info.IdnetEnd = this.info.IdnetEnd.split(' ')[0]
            if (this.info.IdnetEnd === '0001-01-01') {
              this.info.IdnetEnd = undefined
              this.PermanentId = 1
            }
          }
        })
      }
    },
    // 保存
    handleSubmit(val) {
      this.$refs.subForm.validate().then(() => {
        this.info.AccountNo = this.accountNo
        console.log(this.info)
        AddMerchantMainData(this.info).then(res => {
          if (res) {
            this.$toast.success('操作成功')
            this.accountNo = res.Data.AccountNo
            if (val === 1) {
              // 下一步
              this.$router.push({
                path: '/merchantPaper/manageInfo',
                query: { accountNo: this.accountNo }
              })
            } else {
              this.$router.replace({
                path: '/merchantPaper/',
                query: { accountNo: this.accountNo }
              })
            }
          }
        })
      })
    },
    idnetTypeOnConfirm(value) {
      this.idnetTypePicker = false
      this.idnetTypeText = value.text
      this.info.IdnetType = value.id
    },
    idnetStartOnConfirm(value) {
      this.idnetStartPicker = false
      this.info.IdnetStart = utils.dateFomat('yyyy-mm-dd', value)
    },
    idnetEndOnConfirm(value) {
      this.idnetEndPicker = false
      this.info.IdnetEnd = utils.dateFomat('yyyy-mm-dd', value)
    },
    // 营业执照上传回调
    licenseImageAfterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.info.LicenseImage = res.Data.FullPath
          } else {
            this.licenseImageArr = []
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    // 身份证头像面上传回调
    idnetImageAfterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.info.IdnetImage = res.Data.FullPath
          } else {
            this.idnetImageArr = []
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    // 身份证国徽面上传回调
    idnetBackAfterRead(file) {
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            this.info.IdnetBackImage = res.Data.FullPath
          } else {
            this.$toast.fail('上传图片失败，请重新上传')
            this.idnetBackImageArr = []
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-text {
  color: $colorC;
  font-size: 28px;
  background: $colorBg;
  padding-left: 264px;
  margin-top: -30px;
  z-index: 999;
  position: relative;
}
/* 上传身份证正反面中间横线去掉*/
.ID-box-no-line {
  .van-uploader__preview-image {
    height: 111px;
    width: 192px;
  }
  .van-cell:nth-last-child(3) {
    padding-bottom: 0;
    &::after {
      content: none;
    }
  }
}
/* 身份证照片框 */
.upload-box {
  flex-direction: column;
  height: 222px;
  width: 384px;
  background: $colorF5;
  color: $colorC;
  .svg-icon {
    font-size: 58px;
    color: $colorC;
  }
}
</style>
